<template>
    <div class="cart-container">
        <!-- 用户登录信息 -->
        <Header> </Header>
        <!-- 头部 -->
        <div class="cart-header">
            进行预约时可预约当天以及未来七天的可预约的时间段 , 每人最多预约十辆车。
        </div>
        <!-- 选择进入校园的校区 -->
        <div class="cart-school">
            <div style="font-weight: bold;color: red;">选择预约校区</div>
            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item v-model="campus" :options="shcool" />
            </van-dropdown-menu>
        </div>
        <!-- 中间内容 -->
        <div class="person-modiletwo">
            <!-- 标题 -->
            <div class="person-title">
                <div>
                    <div>选择日期 (北京时间 UTC+8)</div>
                    <div>刷新时间:{{ time }}</div>
                </div>
                <div><a-button type="primary" style="width: 60px;" @click="getUpout">刷新</a-button></div>
            </div>
            <!-- 日期选择 -->
            <div class="person-time">
                <div v-for="(item, index) in dataTime" :key="index"
                    :class="{ 'box-highlight': item.selected, 'box-disabled': !item.selectable }"
                    @click="toggleSelection(item, index)" class="div">
                    <div class="date"> {{ item.time.slice(5) }}</div>
                    <div style="font-size: 13px;"> {{ item.num }}</div>
                    <div style="font-size: 13px;"> 预约</div>
                </div>
            </div>
        </div>
        <div div class=" yuanying">
            <div style="font-weight: bold;color:red;">选择进校原因</div>
            <van-dropdown-menu active-color="#1989fa" style="font-size: 12px !important;">
                <van-dropdown-item v-model="matter" :options="option" :title="matter ? `${matter}` : '请选择原因'" />
            </van-dropdown-menu>
        </div>
        <!-- 预约车辆信息 -->
        <div class="cart-xinxi">
            <div class="cart-xinxi-title">
                <div>预约车辆信息</div>
                <div style="display: flex;justify-content: space-between;width: 80px;">
                    <div @click="getAdd" class="cart-add">
                        <div> <img src="../assets/jia.png" alt="" style="width: 10px;height: 10px;"></div>
                        <div style="font-size: 12px;color: #fff;">添加</div>
                    </div>
                    <div @click="getRemove">清空</div>
                </div>
            </div>
            <div class="cart-tixin">
                提醒：预约多个车辆时点击“添加图标”按钮进行预约，车牌号必须真实无误，否则车辆无法进校。
            </div>
            <div class="cart-pei" v-for="(driver, index) in drivers" :key="index">
                <div class="cart-muny">车辆<span class="vertical-text">{{ index + 1 }}</span>
                </div>
                <div style="width: 100%;" class="cart-input">
                    <input placeholder="车主姓名" v-model="driver.driverName" :name="`driverName_${index}`"
                        style="border-bottom: 1px solid #e5edfa;">
                    <input placeholder="车主电话" v-model="driver.driverPhone" :name="`driverPhone_${index}`"
                        style="border-bottom: 1px solid #e5edfa;">
                    <input placeholder="车牌号" v-model="driver.licenseNumber" readOnly :name="`licenseNumber_${index}`"
                        @click="getKeyword(index)">
                </div>
                <div class="cart-remove">
                    <img src="../assets/remove.png" alt="" @click="getRemoveApi(index)">
                </div>
            </div>
            <!-- 车牌号输入 -->
            <van-popup v-model="showKeyboards" v-if="showKeyboards" round position="bottom"
                :style="{ height: '400px' }">
                <Keyboards @sendCarNumber="getcrNumber"></Keyboards>
            </van-popup>
        </div>
        <div class="btton">
            <a-button type="primary" @click="getAddCartApi(index)">
                立即预约
            </a-button>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    import Header from '@/components/header.vue';
    import Keyboards from '../components/keyword.vue'  //车牌号键盘组件
    import { getCartDate, getCartAdd } from '@/api/index'
    export default {
        components: { Keyboards, Header },
        data() {
            return {
                dataTime: [],
                selectedBoxes: '',
                drivers: [{
                    driverName: '',
                    driverPhone: '',
                    licenseNumber: '',
                }],
                time: moment().format('YYYY-MM-DD HH:mm:ss'),
                showKeyboards: false,
                active: 1,
                index: '',
                bookedPerson: '',
                matter: '', //进入原因得value
                option: [
                    { text: '参观', value: '参观' },
                    { text: '办事', value: '办事' },
                    { text: '访问', value: '访问' },
                    { text: '其它', value: '其它' },
                ],
                campus: 0,//选择校区
                shcool: [
                    { text: '本部校区', value: 0 },
                    { text: '榆中校区', value: 1 },
                    { text: '医学院校区', value: 2 },
                ],
            }
        },
        created() {
            this.getDateTimeApi()
            this.bookedPerson = localStorage.getItem('uuid') //拿到uuid进行实名认证
        },
        watch: {
            campus() {
                this.getDateTimeApi()
            }
        },
        methods: {
            //拿到日期
            async getDateTimeApi() {
                let { campus } = this
                console.log(campus);
                let res = await getCartDate(campus)
                if (res.data.code == 200) {
                    this.dataTime = res.data.data.dataTime
                } else {
                    this.$toast.fail(`${res.data.msg}`)
                }
            },
            //选择日期
            toggleSelection(box, index) {
                if (this.dataTime[index].selectable) {
                    // 可选的日期才能进行选择和取消选择
                    this.dataTime.forEach((item, idx) => {
                        item.selected = idx === index ? !item.selected : false;
                    });
                    if (this.dataTime[index].selected) {
                        // 将选中的日期值保存下来
                        this.selectedBoxes = this.dataTime[index].time;
                    } else {
                        // 如果取消选择，则将选中日期值置为null
                        this.selectedBoxes = null;
                    }
                } else {
                    let msg = this.dataTime[index].cause
                    this.$toast.fail(msg)
                }
            },
            //添加车辆预约信息
            async getAddCartApi() {
                if (this.matter) {
                    if (this.selectedBoxes) {
                        let isValid = true;
                        var reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/ //手机号正则
                        this.drivers.forEach((driver, index) => {
                            if (driver.driverName === "") {
                                isValid = false;
                                this.$toast.fail(`第${index + 1}辆车的姓名不能为空`)
                                return;
                            } else if (!reg.test(driver.driverPhone)) {
                                isValid = false;
                                this.$toast.fail(`第${index + 1}辆车的电话格式不正确`)
                                return;
                            } else if (driver.licenseNumber === "") {
                                isValid = false;
                                this.$toast.fail(`第${index + 1}辆车的车牌不能为空`)
                                return;
                            }
                            // 进行其他的输入验证，根据需要添加其他验证条件
                        });
                        if (isValid) {
                            this.$dialog.confirm({
                                message: '是否进行车辆预约?',
                            }).then(async () => {
                                let { selectedBoxes, drivers, bookedPerson, campus, matter } = this
                                // 将数据传递给后端
                                let res = await getCartAdd(bookedPerson, selectedBoxes, drivers, campus, matter)
                                if (res.data.code == 200) {
                                    this.$toast.success(`${res.data.msg}`)
                                    this.drivers = [{ driverName: '', driverPhone: '', licenseNumber: '', }]
                                    this.selectedBoxes = ''
                                    this.getDateTimeApi()
                                    this.$router.push('/')
                                } else {
                                    this.$dialog.alert({
                                        message: `${res.data.msg} `,
                                    })
                                }
                            }).catch(() => { })
                        }
                    } else {
                        this.$toast.fail(`请选择日期`)
                    }
                } else {
                    this.$dialog.alert({
                        message: `请选择预约原因`,
                    })
                }
            },
            //刷新功能
            getUpout() {
                const toast = this.$toast.loading({
                    duration: 0, // 持续展示 toast
                    forbidClick: true,
                    message: '刷新中',
                });
                let second = 1;
                const timer = setInterval(() => {
                    second--;
                    if (second) {
                        toast.message = `刷新中`;
                    } else {
                        this.selectedBoxes = ''
                        this.getDateTimeApi()
                        this.time = moment().format('YYYY-MM-DD HH:mm:ss')
                        clearInterval(timer);
                        // 手动清除 Toast
                        this.$toast.clear();

                    }
                }, 500);
            },
            getKeyword(index) {//打开键盘输入
                this.index = index
                console.log(index);
                this.showKeyboards = true
            },
            getcrNumber(val) {//确认后关闭键盘，拿到输入数据
                let { index, drivers } = this
                this.showKeyboards = false
                drivers[index].licenseNumber = val
            },
            //添加车辆
            getAdd() {
                if (this.drivers.length <= 9) {
                    this.drivers.push({
                        driverName: "",
                        driverPhone: "",
                        licenseNumber: ""
                    });
                } else {
                    this.$toast.fail('最多预约十辆车')
                }
            },
            // 清空
            getRemove() {
                this.$toast.success('清除成功')
                this.drivers = [{ driverName: '', driverPhone: '', licenseNumber: '', }]
            },
            //删除  
            getRemoveApi(index) {
                if (index != 0) {
                    this.drivers.splice(index, 1)
                    this.$toast.success('删除成功')
                } else {
                    this.$toast.fail('至少填写一辆车辆信息')
                }
            }
        }

    }
</script>

<style lang="less">
    .van-dropdown-menu__title {
        font-size: 14px !important;
    }

    //对下拉菜单的样式进行修改
    .van-dropdown-menu__title::after {
        border-color: transparent transparent #000000 #070707 !important;
    }

    .van-dropdown-menu__bar {
        box-shadow: 0 2px 12px rgba(254, 254, 255, 0.12);
    }

    // 容器
    .cart-container {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 0 auto;

        .cart-header {
            width: 90%;
            height: 100px;
            background-color: #ffffff;
            border-radius: 5px;
            box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
            border-left: 4px solid #397ad6;
            display: flex;
            align-items: center;
            color: black;
            font-size: 14px;
            padding: 0 10px;
            margin: 20px auto 15px auto;
        }

        // 中间内容
        .person-modiletwo {
            width: 90%;
            height: auto;
            background-color: #ffffff;
            border-radius: 5px;
            box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
            margin: 20px auto 10px auto;

            .person-title {
                width: 100%;
                height: 80px;
                display: flex;
                padding: 0 10px;
                justify-content: space-between;
                align-items: center;
                font-weight: 400;
                font-size: 14px;
            }

            .person-time {
                width: 100%;
                height: auto;
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                align-items: center;
                text-align: center;
                padding: 0 10px 20px 10px;
                margin: 0 auto;

                .div {
                    width: 25%;
                    height: 80px;
                    padding-top: 5px;
                    border-radius: 10px;
                    background-color: #f9fafc;
                    border: 1px solid #ccc;

                }

                //  已选中
                .box-highlight {
                    border: 1.5008px solid #4ca6fe;
                    /* 添加其他高亮样式 */
                }

                // 禁止选中
                .box-disabled {
                    background-color: #fff;
                    color: #ccc;
                    font-weight: 200;

                    .date {
                        font-size: 18px;
                        color: #ccc;
                        font-weight: 200;
                    }
                }

                .date {
                    font-size: 18px;
                    font-weight: 600;
                    color: black;
                }
            }
        }

        //选择校区
        .cart-school {
            width: 90%;
            background-color: #ffffff;
            border-radius: 5px;
            box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: auto;

        }

        //车辆预约人员
        .cart-xinxi {
            width: 90%;
            background-color: #ffffff;
            border-radius: 5px;
            box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.4);
            padding: 20px 15px;
            margin: 20px auto 10px auto;

            .cart-xinxi-title {
                display: flex;
                justify-content: space-between;

                .cart-add {
                    background-color: rgb(24, 144, 255);
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    height: 20px;
                    width: 45px;
                    border-radius: 5px;
                }
            }

            .cart-tixin {
                font-size: 14px;
                font-weight: 300;
                padding: 15px 0;
            }

            .cart-pei {
                width: 100%;
                border: 1px solid #d1d5dd;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 10px;
                margin-bottom: 20px;
                overflow: hidden;

                .cart-muny {
                    width: 25px;
                    font-size: 14px;
                    font-weight: 700;
                    height: 100px;
                    line-height: 25px;
                    writing-mode: vertical-rl;
                    /* 从上至下书写 */
                    text-orientation: upright;
                    /* 保持正立显示 */
                    background-color: #e5edfa;
                    text-align: center;

                    .vertical-text {
                        writing-mode: horizontal-tb;
                    }
                }

                .cart-remove {
                    width: 30px;
                    height: 100px;
                    border-left: 1px solid #e5edfa;
                    line-height: 100px;
                    background-color: #F6F6F6;
                    text-align: center;

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }

                .cart-input {
                    width: 100%;

                    input {
                        width: 100%;
                        border: none;
                        height: 32px;
                        line-height: 32px;
                        padding-left: 10px;
                    }
                }

            }
        }

        .btton {
            width: 90%;
            height: auto;
            margin: 30px auto 30px auto;

            button {
                width: 100%;
                height: 45px;
                border-radius: 10px;
            }
        }

        //  进校原因样式
        .yuanying {
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background-color: #ffffff !important;
            border-radius: 5px;
            box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
            margin: 15px auto auto auto;
        }
    }
</style>